<template>
  <div class="app-container">
    <div class="pwd_form">
      <el-form :model="editForm" label-width="140px" :rules="editFormRules" ref="editForm">
        <el-form-item label="原密码" prop="oldPassword" class="form-item">
          <el-input type="password" v-model="editForm.oldPassword" placeholder="原密码" show-password class="filter-item"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword" class="form-item">
          <el-input type="password" v-model="editForm.newPassword" placeholder="新密码" show-password class="filter-item"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword" class="form-item">
          <el-input type="password" v-model="editForm.confirmPassword"
                    auto-complete="new-password" show-password
                    placeholder="与新密码保持一致" class="filter-item"></el-input>
        </el-form-item>
      </el-form>
      <div class="dialog-footer">
        <el-button size="mini" @click="colse">重置</el-button>
        <el-button type="primary" size="mini" @click="upeateData">保存</el-button>
      </div>
    </div>

    <amend-pwd v-if="fistFlag == 0"></amend-pwd>
  </div>
</template>
<script>
  import { doPost, doGet } from '@/api/index'
  import { mapGetters } from 'vuex'

  export default {
    computed: {
      ...mapGetters([
        'sidebar',
        'avatar',
        'name',
        'fistFlag',
        'userForm'
      ])
    },
    data() {
      let validatePass = (rule, value, callback) => {
        // let str = /^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/;
        // let str = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{12,26}$/;
        let str = /^(?:(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])).{8,30}$/
        if(value == this.editForm.oldPassword) {
          callback(new Error('新密码与旧密码不能一致'))
        } else if (!str.test(value)) {
          // callback(new Error('只能输入5-20个以字母开头、可带数字、“_”、“.”的字串'))
          callback(new Error('长度至少8位，至少有大小写字母+数字'))
        } else {
          callback()
        }
      }
      let validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'))
        } else if (value !== this.editForm.newPassword) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      }
      return {
        editForm: {
          confirmPassword: '',
          newPassword: '',
          oldPassword: '',
          id: ''
        },
        editFormRules: {
          oldPassword: [{required: true, message: '原密码不能为空', trigger: 'blur'}],
          newPassword: [{required: true, message: '新密码不能为空', trigger: 'blur'},
            { validator: validatePass, trigger: 'blur' }
            ],
          confirmPassword: [
            { required: true, message: '确认密码不能为空', trigger: 'blur' },
            { validator: validatePass2, trigger: 'blur' }
          ]
        },
      }
    },
    created() {},
    methods: {
      upeateData() {
        this.$refs['editForm'].validate(valid => {
          if (valid) {
            this.editForm = {
              ...this.editForm,
              id: this.userForm.id
            }
            doPost('user/updatepwd',this.editForm).then(res => {
              if (res.code == 200) {
                this.$message.success({
                  message: '修改成功',
                  type: 'success'
                })
                this.editForm = {
                  confirmPassword: '',
                  newPassword: '',
                  oldPassword: '',
                }
                this.$nextTick(() => {
                  this.$refs['editForm'].clearValidate()
                })
              } else {
                this.$message.error(res.message)
              }
            }).catch(error => {
              this.$message.error(error.message)
            })
          }
        })
      },
      colse() {
        this.editForm = {
          confirmPassword: '',
          newPassword: '',
          oldPassword: '',
        }
        this.$nextTick(() => {
          this.$refs['editForm'].clearValidate()
        })
      },
    }
  }
</script>
<style lang="scss" scoped>
  .pwd_form {
    margin: 50px auto;
    width: 35%;
    .dialog-footer {
      text-align: center;
    }
  }
</style>
